<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:disabled="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>声明式渲染</title>
    <!-- 1.引入本地资源-->
    <script src="../js/vue-dev.js"></script>
    <!-- 2.引入外部资源-->
    <!--<script src="https://unpkg.com/vue"></script>-->
</head>

<!--
                        过滤器
1、Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化；
2、过滤器可以用在两个地方：mustache 插值和 v-bind 表达式；
3、过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
    in mustaches
        {{ message | capitalize }}
    in v-bind
        <div v-bind:id="rawId | formatId"></div>
PS:Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式 (后者从 2.1.0 起支持) 中使用，
    因为过滤器设计目的就是用于文本转换。
    为了在其他指令中实现更复杂的数据变换，你应该使用计算属性;

-->
<body>
    <div id="app_filter">
        {{message | capitalize}}
    </div>

    <script>
/**
 *  1.过滤器函数总接受表达式的值 (之前的操作链的结果) 作为第一个参数。
 *      在这个例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数
 */
           var app =  new Vue({
                el:'#app_filter',
                data:{
                  message:'Hello Vue.js!'
                },
                //过滤器的实现
                filters:{
                    capitalize:function (value) {//message作为函数的第一个参数传入
                        return value+".filter";
                    }
                }
            })
/**
 *  2.过滤器可以串联：{{ message | filterA | filterB }}
 *      在这个例子中，filterA 拥有单个参数，它会接收 message 的值，
 *      然后调用 filterB，且 filterA 的处理结果将会作为 filterB 的单个参数传递进来;
 *
 *  3.过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA('arg1', arg2) }}
 *      这里，filterA 是个拥有三个参数的函数。message 的值将会作为第一个参数传入。
 *      字符串 'arg1' 将作为第二个参数传给 filterA，表达式 arg2 的值将作为第三个参数。
 */

    </script>




</body>

</html>